<template>
    <div class="addForm-view">
        <el-dialog :title="titleText" :visible.sync="dialogFormVisible" width="10%" :show-close="showimg"  :close-on-click-modal="showimg">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" >
                <el-form-item  prop="name">
                    <div class="addForm-form-input">
                        <div class="addForm-form-input-title"><span>*</span>角色名称：</div>
                        <div>
                            <el-input
                                    class="addForm-form-input-input"
                                    placeholder="请输入角色名称"
                                    v-model="ruleForm.name"
                                    clearable>
                            </el-input>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item  prop="tips">
                    <div class="addForm-form-input">
                        <div class="addForm-form-input-title">角色描述：</div>
                        <div>
                            <el-input
                                    class="addForm-form-input-input"
                                    placeholder="请输角色描述"
                                    v-model="ruleForm.tips"
                                    clearable>
                            </el-input>
                        </div>
                    </div>
                </el-form-item>


            <div class="addForm-form-input">
                <div >角色权限：</div>
                <div class="addForm-form-tree">
                    <el-tree
                            ref="tree"
                            :data="roleList"
                            show-checkbox
                            node-key="id"
                            :default-checked-keys="[]"
                            @check-change="handleCheckChange"
                            :props="defaultProps1">
                    </el-tree>
                </div>
                <div>

                </div>
            </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button class="cancel-button"  @click="closeFormrole('ruleForm')" >取 消</el-button>
                <el-button class="sure-button" type="primary" @click="addstruct('ruleForm')">保 存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "addRole",
        props:{
            seeDetails:{
                type:Object,
            },
            dialogFormVisible: {
                type: Boolean
            },
        },
        watch: {
            seeDetails:{
                handler(newValue, oldValue) {
                    if (newValue) {
                        for (let props in newValue) {
                            this.ruleForm[props] = newValue[props];
                        }
                    }
                }
            },
            checked(){
                if(this.checked==true){
                    this.$refs.tree.setCheckedKeys([1]);
                }else {
                    this.$refs.tree.setCheckedKeys([]);
                }

            }
        },
        data(){
            return{
                organizationId: this.$store.getters.userData.userMsg.id,//组织id
                titleText:this.seeDetails?"编辑角色":"新增角色",
                checked:false,
                resource:0,
                treeList:[],
                showimg:false,
                roleList:[],
                treerole:"",
                defaultProps1: {
                    children: 'children',
                    label: 'name',
                    value:'id',
                },
                ruleForm:{
                    name:undefined,//角色名称
                    tips:undefined,//角色描述

                },
                rules: {
                    name: [
                        { required: true, message: '请输入角色名称', trigger: 'blur' },
                        { min: 1, max: 50, message: '长度在 1 到 50个字符', trigger: 'blur' }
                    ],
                }
            }
        },
        mounted(){
            console.log(this.showDetails,"lalal")
            let _this = this;
            _this.Api.setting.getAllResources({}).then((data)=>{
                console.log(data.data,"shushushushushushushushu")
                this.roleList=data.data
            })
        },
        methods: {
            handleCheckChange(data) {
                this.treerole=this.$refs.tree.getCheckedKeys().join(",");
                console.log(this.$refs.tree.getCheckedKeys());
            },
            handleChange(e) {
                let a = e.length;
            },
            closeFormrole(formName) {
                // this.$refs[formName].resetFields();
                console.log("aaaaaaa")
                this.ruleForm.name=""
                this.ruleForm.tips=""
                this.$emit("close");
            },
            addstruct(formName){
                let _this = this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if(this.seeDetails){
                            var params={
                                id:this.seeDetails.id,//所属组织id
                                name:this.ruleForm.name,//名称
                                tips:this.ruleForm.tips,//描述
                                menuIds:this.treerole,
                            }
                        }else {
                            var params={
                                distributorId:_this.organizationId,//所属组织id
                                name:this.ruleForm.name,//名称
                                tips:this.ruleForm.tips,//描述
                                menuIds:this.treerole,
                            }
                        }


                        console.log(params,">>>>>>>>>>>>>")
                        if(this.seeDetails){
                            _this.Api.setting.roleUpdate(params).then((data)=>{
                                if(data.returnCode==10000){
                                    this.closeFormrole()
                                    this.$emit("refreshList1");
                                    this.$message({
                                        type: 'success',
                                        message:"修改成功"
                                    });
                                }else {
                                    this.$message({
                                        type: 'warning',
                                        message: data.msg
                                    });
                                }


                            })
                        }else {
                            _this.Api.setting.roleAdd(params).then((data)=>{
                                if(data.returnCode==10000){
                                    this.$emit("refreshList");
                                    this.$message({
                                        type: 'success',
                                        message:"新增成功"
                                    });
                                }else {
                                    this.$message({
                                        type: 'warning',
                                        message: data.msg
                                    });
                                }
                                this.closeFormrole()
                            })
                        }

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });

                console.log(">>>>>>",_this.treerole)

            }
        }
    }
</script>

<style>
    .addForm-view .el-dialog--small {
        width:517px;
    }
    .addForm-view .el-form-item__label {
        text-align: right;
        vertical-align: middle;
        float: left;
        font-size: 14px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(0,0,0,0.85);
        line-height:22px;
        padding: 7px 0px 0px 30px;
        box-sizing: border-box;
    }
    .addForm-view  .el-dialog__header{
        height: 50px;
        padding: 10px ;
        text-align: left;
        font-size:16px;
        font-family:PingFangSC-Medium;
        font-weight:500;
        color:rgba(0,0,0,0.85);
        line-height:24px;

    }
    .addForm-view .el-dialog__body{
        border-top: 1px #E9E9E9 solid;
        border-bottom: 1px #E9E9E9 solid;
    }
</style>
<style scoped rel="stylesheet/scss" lang="scss">
    .addForm-form-tree{
        width:375px;
        min-height: 100px;
        max-height: 800px;
        overflow: scroll;
    }
    .cotent-botton-checkboxtext{
        font-size:14px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(0,0,0,0.65);
        line-height:22px;
        align-self: center;
        width:375px;
        height:32px;
    }
    .addForm-form-resource{
        display: flex;
        margin-bottom: 12px;
        justify-content: center;
    }

    .addForm-form-resource-radio{
        font-size:14px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(0,0,0,0.65);
        line-height:22px;
        align-self: center;
        margin-right: 5px;
    }
    .addForm-form-input{
        display: flex;
        margin-top: 24px;
        justify-content: center;
    }
    .addForm-form-input-title{
        font-size:14px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(0,0,0,0.85);
        line-height:22px;
        align-self: center;
        min-width: 70px;
        text-align: right;
        span{
            color: #FF0606;
            margin-bottom: -3px;
        }
    }
    .addForm-form-input-input{
        width:375px;
        height:32px;
        background:rgba(255,255,255,1);
        border-radius:4px;
    }
    .cancel-button{
        padding: 0px;
        width:78px;
        height:32px;
        line-height:32px;
        border-radius:4px;
        border:1px #D9D9D9 solid;
        font-size:14px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(0,0,0,0.25);
        text-align: center;
    }
    .sure-button{
        padding: 0px;
        width:78px;
        height:32px;
        line-height:32px;
        border-radius:4px;
        background:rgba(24,144,255,1);
        font-size:14px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(255,255,255,1);
        text-align: center;
    }
</style>